<template>
	<view class="content-baisc-layout">
		<view class="header-area">
			<image class="logo" mode="widthFix" :src="appConfig.shop_login_logo"></image>
			<view class="main-title">
				欢迎登录{{appConfig.name}}
			</view>
			<view class="nr u-padding-top-15">
				让经纪人生活更美好
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="u-flex u-flex-col u-col-center u-row-center content-area">
			<button size="lg" class="br60 row-center wechat-login-btn white flex" @click="mnpLoginFun">
				<u-icon name="weixin-fill" color="#FFF" size="34" class="u-padding-right-10"></u-icon>
				微信登录
			</button>
			<view class="muted mt20" @click="back">暂不登录</view>
		</view>
		<!--  #endif -->
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="u-flex u-flex-col u-col-center u-row-center content-area">
			<view class="login-area" v-if="!isWeixin">
				<view class="">
					<view v-if="loginType == 0">
						<view class="input row">
							<u-icon name="phone" class="u-margin-right-20"></u-icon>
							<u-input v-model="account" :height="80" placeholder="请输入账户" :input-border="false" />
						</view>
						<view class="input row u-margin-top-30">
							<u-icon name="lock-fill" class="u-margin-right-20"></u-icon>
							<u-input v-model="password" :height="80" type="password" style="flex: 1;"
								:password-icon="false" placeholder="请输入密码" :input-border="false" />
							<navigator style="width: 132rpx;color: #66a6ff;" url="/pages/forget_pwd/forget_pwd"
								hover-class="none">忘记密码</navigator>
						</view>
					</view>
					<view v-if="loginType == 1">
						<view class="input row">
							<u-icon name="phone" class="u-margin-right-20"></u-icon>
							<u-input v-model="telephone" :height="80" placeholder="手机号" :input-border="false" />
						</view>
						<view class="input row u-margin-top-30">
							<u-icon name="lock-opened-fill" class="u-margin-right-20"></u-icon>
							<u-input v-model="smsCode" :height="80" placeholder="请输入验证码" :input-border="false" />
							<view class="row">
								<view class="sms-btn sm row-center br60" style="color: #66a6ff;border-color: #66a6ff;"
									@click="$sendSms">
									<view v-show="canSendSms">获取验证码</view>
									<u-count-down ref="countDown" :show-days="false" :timestamp="time"
										:showColon="false" separator="zh" color="#66a6ff" separator-color="#66a6ff"
										:show-hours="false" :show-minutes="false" :autoplay="false" v-show="!canSendSms"
										@end="countDownFinish()" />
								</view>
							</view>
						</view>
					</view>
					<view class="xs row mt60">
						<u-checkbox-group>
							<u-checkbox v-model="agreement" :label-size="24" :size="24"
								shape="circle">已阅读并同意</u-checkbox>
						</u-checkbox-group>

						<navigator class="primary" style="color: #66a6ff;" hover-class="none"
							url="/pages/bundle/server_explan/server_explan?type=0">《服务协议》</navigator>
						和
						<navigator class="primary" style="color: #66a6ff;" hover-class="none"
							url="/pages/bundle/server_explan/server_explan?type=1">《隐私协议》</navigator>
					</view>
					<button style="margin: 40rpx 0 50rpx;width: 680rpx;background-color: #66a6ff;" size="lg"
						class="br60 white" @click="loginFun">登录</button>
					<view class="row-between" style="width: 680rpx;">
						<view class="muted xs" @click="changeLoginType">{{loginType == 0 ? "短信验证码登录" : "账号登录"}}</view>
						<navigator class="muted xs" url="/pages/register/register" hover-class="none">注册账号</navigator>
					</view>
				</view>
				<view class="" v-if="appConfig.app_wechat_login">
					<u-divider class="u-padding-32">其他登录方式</u-divider>

					<view class="u-flex u-flex-wrap u-row-center">
						<view @click="appWxLogin" v-if="appConfig.app_wechat_login">
							<image class="image icon-xl" src="/static/images/icon_wechat.png"></image>
							<view class="sm u-padding-top-16">微信登录</view>
							<text class="u-padding-top-16">{{text}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="u-flex-col u-col-center wechat-login">
				<u-icon class="u-margin-top-40" name="weixin-fill" color="#07c160" size="80"></u-icon>
				<view class="xxl muted u-margin-top-20 wave">
					<span>微</span>
					<span>信</span>
					<span>自</span>
					<span>动</span>
					<span>登</span>
					<span>录</span>
					<span>中</span>
					<span>...</span>
				</view>
			</view>
		</view>
		<!--  #endif -->

		<official-accounts v-if="focusCompletionStatus" @focusCompletion="focusCompletionFun"></official-accounts>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import {
		accountLogin,
		codeLogin,
		sendSms,
		wxpLogin,
		smsCodeLogin,
		opLogin,
		authLogin
	} from '@/api/app';
	import {
		inputInviteCode,
		getUserAuthentication
	} from '@/api/user'
	import wechath5 from '@/utils/wechath5'
	import {
		isWeixinClient,
		currentPage,
		client
	} from '@/utils/tools'
	import {} from '@/utils/tools'
	import {
		SMSType
	} from "@/utils/type"
	import Cache from "@/utils/cache"
	import {
		BACK_URL
	} from '@/config/cachekey'
	import {
		getWxCode,
		getUserProfile
	} from '@/utils/login'
	const loginType = {
		ACCOUNT_LOGIN: 0,
		SMS_CODE_LOGIN: 1,
	}
	export default {
		data() {
			return {
				agreement: false,
				password: '',
				account: '',
				code: '',
				isWeixin: '',
				loginType: 0,
				smsCode: '',
				time: 59,
				canSendSms: true,
				telephone: "",
				text: '',
				focusCompletionStatus: false
			};
		},

		async onLoad(option) {

			// #ifdef H5
			// H5微信登录
			this.isWeixin = isWeixinClient()
			if (this.isLogin) {
				uni.switchTab({
					url: '/pages/index/index'
				})
				return
			}
			if (this.isWeixin) {
				const {
					code
				} = option
				if (code) {
					const data = await wechath5.authLogin(code)
					this.loginHandle(data)
				} else {
					wechath5.getWxUrl()
				}
			}
			// #endif
		},
		onUnload() {

		},
		methods: {
			...mapMutations(['LOGIN']),
			...mapActions(['getUser']),
			countDownFinish() {
				this.canSendSms = true;
			},
			// 小程序登录
			async mnpLoginFun() {
				if (!this.agreement) return this.$u.toast('请阅读底部协议');
				const {
					userInfo: {
						avatarUrl,
						nickName,
						gender
					}
				} = await getUserProfile()
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				const wxCode = await getWxCode()
				const {
					code,
					data,
					msg
				} = await authLogin({
					code: wxCode,
					nickname: nickName,
					headimgurl: avatarUrl,
				})
				if (code == 1) {
					this.loginHandle(data)
				} else {
					this.$toast({
						title: msg
					})
				}
			},
			// 账号登录
			async loginFun() {
				if (!this.agreement) return this.$u.toast('请阅读底部协议');
				const {
					account,
					password,
					telephone,
					smsCode
				} = this
				if (this.loginType == 0) {
					const {
						code,
						data
					} = await accountLogin({
						account,
						password,
						client: client
					})
					if (code == 1) {
						this.loginHandle(data)
					}
				} else {
					if (!telephone) {
						this.$toast({
							title: '请填写手机号'
						});
						return;
					}
					if (!smsCode) {
						this.$toast({
							title: '请填写手机验证码'
						});
						return;
					}
					smsCodeLogin({
						account: telephone,
						code: smsCode,
					}).then(res => {
						if (res.code == 1) {
							this.loginHandle(res.data)
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					success() {
						// 刷新上一页
						const {
							onLoad,
							options
						} = currentPage()
						onLoad && onLoad(options)
					}
				})
			},
			// 登录结果处理
			async loginHandle(e) {
				this.LOGIN(e)
				uni.hideLoading()
				const inviteCode = Cache.get("INVITE_CODE")
				if (inviteCode) {
					inputInviteCode({
						code: inviteCode
					})
				}
				let {
					code,
					data
				} = await getUserAuthentication();
				if (parseInt(data) == 0) {
					return uni.redirectTo({
						url: '/pages/user/authentication'
					})
				}
				// #ifdef H5
				if (this.isWeixin) {
					this.focusCompletionStatus = true;
				} else {
					this.focusCompletionFun()
				}

				//#endif
				// #ifdef MP-WEIXIN  || APP-PLUS
				uni.navigateBack({
					success() {
						// 刷新上一页
						const {
							onLoad,
							options
						} = currentPage()
						onLoad && onLoad(options)
					}
				})
				//#endif

			},
			changeLoginType() {
				if (this.loginType == loginType.ACCOUNT_LOGIN) {
					this.loginType = loginType.SMS_CODE_LOGIN
				} else if (this.loginType == loginType.SMS_CODE_LOGIN) {
					this.loginType = loginType.ACCOUNT_LOGIN
				}
			},
			// 发送验证码
			$sendSms() {
				if (this.canSendSms == false) {
					return;
				}
				if (!this.telephone) {
					this.$toast({
						title: '请填写手机号信息～'
					})
					return;
				}

				sendSms({
					mobile: this.telephone,
					key: SMSType.LOGIN
				}).then(res => {
					if (res.code == 1) {
						this.canSendSms = false;
						this.$refs.countDown.start();
						this.$toast({
							title: res.msg
						});
					}
				})
			},
			// app微信登录
			async appWxLogin() {
				if (!this.agreement) return this.$u.toast('请阅读底部协议');
				uni.login({
					provider: 'weixin',
					success: (res) => {
						uni.showLoading({
							title: '登录中...',
							mask: true
						});
						const {
							openid,
							access_token,
						} = res.authResult
						opLogin({
							openid,
							access_token
						}).then(res => {
							uni.hideLoading()
							if (res.code == 1) {
								this.loginHandle(res.data)
							}
						})
					}
				})


			},
			focusCompletionFun() {
				location.replace('/mobile' + (Cache.get(BACK_URL) || '/'))
				Cache.remove(BACK_URL)
			}
		},
		computed: {
			...mapGetters(['appConfig'])
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
		text-align: center;
		position: relative;

		.header-area {
			padding: 9vh 0 9.5vh;
			background: url('https://resource.lanbaozixun.com/uploads/images/20250717093424557e24112.png') no-repeat;
			background-size: 100% 100%;
		}

		.content-baisc-layout {
			height: 100vh;
			// display: grid;
			// grid-template-rows: auto 1fr 70rpx;

			.logo {
				height: 120rpx;
				width: 120rpx;
				margin-top: 1vh;
				overflow: hidden;
				border-radius: 30rpx;
			}

			.main-title {
				font-weight: 600;
				margin-top: 15px;
				font-size: 18px;
			}

			.content-area {
				margin-top: -2vh;
				background: white;
				padding: 5vh 0 0 0;
				border-radius: 30rpx 30rpx 0 0;
			}

			.wechat-login-btn {
				width: 70vw;
				background-color: #66a6ff;
			}

			.mt60 {
				margin-top: 60rpx;
			}

			.login-area {
				height: 70%;
				display: grid;
				grid-template-rows: auto auto;

				.input {
					padding: 0 20rpx;
					border-radius: 100rpx;
					background: #F4F7FD;
					// box-shadow: 0 0 30rpx 0 rgba(43, 86, 112, .1);
				}
			}
		}
		
		.wechat-login{
			width: 100%;
			padding-top: 20vh;
		}

		@keyframes wave {

			0%,
			100% {
				transform: translateY(0);
				/* 初始和结束位置 */
			}

			25% {
				transform: translateY(-5px);
				/* 向上移动5px */
			}

			50% {
				transform: translateY(5px);
				/* 向下移动5px */
			}

			75% {
				transform: translateY(-5px);
				/* 向上移动5px */
			}
		}

		.wave span {
			display: inline-block;
			/* 使每个字母可以单独应用动画 */
			animation: wave 1.5s infinite;
			/* 应用动画 */
		}

		/* 为每个字母设置不同的延迟，创建海浪效果 */
		.wave span:nth-child(1) { animation-delay: 0s; }
		.wave span:nth-child(2) { animation-delay: 0.1s; }
        .wave span:nth-child(3) { animation-delay: 0.2s; }
        .wave span:nth-child(4) { animation-delay: 0.3s; }
        .wave span:nth-child(5) { animation-delay: 0.4s; }
        .wave span:nth-child(6) { animation-delay: 0.5s; }
        .wave span:nth-child(7) { animation-delay: 0.6s; }
        .wave span:nth-child(8) { animation-delay: 0.7s; }
        .wave span:nth-child(9) { animation-delay: 0.8s; }
        .wave span:nth-child(10) { animation-delay: 0.9s; }

	}
</style>